<template>
	<div class="content">
		<Button type="info" class="btn" @click="changeLanguage">{{ nowLanguage }}></Button>
		<Button type="info" class="btn" @click="addwater">{{ $t('ivcs.addwater') }}</Button>
		<Button type="info" class="btn" @click="addbackgroup">{{ $t('ivcs.addbackground') }}</Button>
		<Button type="info" class="btn2" @click="close">{{ $t('ivcs.Yes') }}</Button>
	</div>
</template>

<script>
import Language from './Toast/Language';
export default {
	name: 'Settings',
	data() {
		return {
			nowLanguage: localStorage.getItem('language'),
			resolution: {
				width: 640,
				height: 480
			},
			resolutionselect: 1,
			maxBitrate: 512
		};
	},
	methods: {
		/*切换语言*/
		changeLanguage() {
			var self = this;
			this.$Modal.success({
				title: '',
				render: h => {
					return h(Language, {
						ref: 'Language'
					});
				},
				width: 600,
				closable: false,
				okText: 'OK',
				cancelText: '取消',
				onOk() {
					console.log(this.$refs.Language.language);
					if (this.$refs.Language.language == '简体中文') {
						localStorage.setItem('language', '简体中文');
						localStorage.setItem('lang', 'zh');
						self.$i18n.locale = 'zh';
						self.nowLanguage = localStorage.getItem('language');
					} else if (this.$refs.Language.language == '繁体中文') {
						localStorage.setItem('language', '繁体中文');
						localStorage.setItem('lang', 'tw');
						self.$i18n.locale = 'tw';
						self.nowLanguage = localStorage.getItem('language');
					}
				},
				onCancel() {}
			});
		},

		/*关闭*/
		close() {
			this.$emit('close');
		},

		addwater() {
			this.$emit('addwater');
		},
		addbackgroup() {
			this.$emit('addbackgroup');
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;

	width: 200px;
	height: 280px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.btn {
	width: 90%;
	height: 30px;
	line-height: 20px;
	background: rgba(102, 172, 244, 1);
	color: rgba(255, 255, 255, 1);
	margin-top: 10px;
	margin-left: 5%;
}

.select {
	width: 90%;
	height: 30px;
	margin-top: 10px;
	/*margin-left: 5%;*/
}

.chooseBtn {
	width: 100%;
	height: 30px;
	line-height: 20px;
	background: rgba(102, 172, 244, 1);
	color: rgba(255, 255, 255, 1);
	/*margin-top: 10px;*/
	margin-left: 5%;
}

.btn2 {
	width: 90%;
	height: 30px;
	line-height: 20px;
	margin-left: 5%;
	color: rgba(255, 255, 255, 1);
	background: rgba(102, 172, 244, 1);
	margin-top: 120px;
}
</style>
